<!--条形图-->
<template>
  <div class="chartcontainer">
    <div :style="{'margin-bottom':'10px'}" v-if="title">{{title}}</div>
    <ve-bar
      :data="blockdata"
      width="100%"
      height="100%"
      :judge-width="true"
      :settings="chartSettings"
      ref="mychart"
      :theme="theme"
      :after-config="afterConfig"
    ></ve-bar>
  </div>
</template>

<script>
import VeBar from "v-charts/lib/bar.common";
import { mBack, getToken, back } from "../../../assets/js/common.js";
import { fetch, post } from "../../../config/request.js";
export default {
  props: {
    diyposition: [Object],
    chartData: [Object],
    changesizewidth: [Number, String],
    changesizeheight: [Number, String],
    colors :[Object],
    timer: [Number, String],
    theme: [Object],
    title:[String],
    searchid: [Number, String],
    chartid: [Number, String],
    field:[String],
    drill:[String],
    isShowLegend: {
      type: Boolean,
      default: true
    }
  },
  data() {
    var that = this;
    this.chartSettings = {
      label: {
        normal: {
          show: true,
          formatter: params => {
            var mvalue = that.ifside ? Math.abs(params.value) : params.value;
            return `${mvalue}`;
          }
        }
      },
      stack: that.chartData.stack ? that.chartData.stack : ""
    };
    return {
      intervaltime: this.timer,
      blockdata: this.chartData,
      ifside: this.chartData.stack ? true : false
    };
  },
  created() { },
  components: { VeBar },
  mounted() {
    if (this.blockdata.ifpercent) {
      this.chartSettings.label.normal.formatter = "{c}%";
    }
  },
  destroyed() { },
  computed: {},

  methods: {
    afterConfig(options) {
      var that = this;
      if (!this.isShowLegend) {
        options.legend = {
          data: []
        }
      }
      options.grid = {
        containLabel: true,
        left: that.ifside ? 30 : 10,
        right: 10,
        bottom: 10,
        top: 30
      };

      options.yAxis[0].axisLabel = {
        interval: 0,
        textStyle: {
          fontSize: 11  //刻度大小
        },
        formatter: function (value) {
          if (value.length > 6) {
            return value.substring(0, 6) + "...";
          } else {
            return value;
          }
        }
      };

      options.xAxis[0].axisLabel = {
        textStyle: {
          fontSize: 11  //刻度大小
        },
        formatter: function (value) {
          return that.ifside ? Math.abs(value) : value;
        } //显示的数值都取绝对值
      };
      return options;
    }
  },
  watch: {
    changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    changesizeheight(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    chartData(oldvalue, newvalue) {
      this.blockdata = oldvalue;
      //??????
      this.chartSettings = {
        yAxisName: [`${this.chartData.columns[1]}`], //   xAxisName: this.chartData.columns[0]
        label: {
          normal: {
            show: true
          }
        }
      };
      this.$refs.mychart.echarts.setOption({
        series: {
          data: this.blockdata
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.chartcontainer {
  width: 100%;
  height: 100%;
}
</style>